import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { NavController, NavParams, Content } from 'ionic-angular';
import { ChatContentItem, ChatMessageItem } from '../entity/chat.entity';
import { ChatProvider } from '../../../providers/chat/chat';
import { ChatFooterComponent } from '../../../components/chat-footer/chat-footer';

@Component({
  selector: 'page-chat-detail',
  templateUrl: 'chat-detail.html'
})
export class ChatDetailPage {

  @ViewChild('content') public content: Content;
  @ViewChild('footerContent', { read: ViewContainerRef }) public footerContent: ViewContainerRef;

  /// 聊天的全部内容
  private chatContent;
  /// 当前正在显示的最后一条信息
  private chatContentItem: ChatContentItem;
  /// 当前需要显示的信息列表
  public messageList: ChatMessageItem[] = [];
  
  /************ Life Cycle ************/
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private chatProvider: ChatProvider,
    private componentFactory: ComponentFactoryResolver) { }

  ionViewDidLoad() {
    this.chatProvider.getAnswer()
    .subscribe((result) => {
      this.chatContent = result;
      this.chatContentItem = result['index'] as ChatContentItem;
      this.messageList.push(this.chatContentItem.question);
    })
  }

  ionViewWillLeave() {
    this.footerContent.clear();
  }

  ngAfterViewChecked() {
    this.content.resize();
    this.content.scrollToBottom();
    // console.log('---checked---');
  }

  /************ Public Actions ************/
  /// 消息显示完毕的回调
  handleCompleteEmitter(isQuestion) {
    if (isQuestion && this.chatContentItem.exitMessage) {
      // 有关闭信息 -> 关闭
      console.log('---handleCompleteEmitter: pop---');
      // this.navCtrl.pop();
    } else {
      if (isQuestion) {
        console.log('---handleCompleteEmitter: question---');
        this.createFooter(this.chatContentItem.answers);
      } else {
        console.log('---handleCompleteEmitter: answer---');
        this.getNextStepBy(this.messageList[this.messageList.length - 1]);
      }
    }
  }

  /************ Private Functions ************/
  /// 创建footer
  private createFooter(answers: ChatMessageItem[]) {
    this.footerContent.clear();
    if (answers) {
      const factory = this.componentFactory.resolveComponentFactory(ChatFooterComponent);
      const component = this.footerContent.createComponent(factory);
      component.instance.items = answers;
      component.instance.emitter.subscribe((answer) => {
        this.footerContent.clear();
        this.showAnswers(answer);
      })
      this.resizeAndScrollToBottom();
    }
  }

  /// 显示消息
  private showAnswers(answer: ChatMessageItem) {
    this.messageList.push(answer);
  }

  /// 获取下一步
  private getNextStepBy(answer: ChatMessageItem) {
    this.chatContentItem = this.chatContent[answer.nextStep] as ChatContentItem;
    if (answer.nextStep === 'done' || answer.nextStep === 'cancel') {
      this.messageList.push(this.chatContentItem.exitMessage);
    } else {
      this.messageList.push(this.chatContentItem.question);
    }
  }
  
  private resizeAndScrollToBottom() {
    this.content.resize();
    setTimeout(() => {
      this.content.scrollToBottom();
    }, 200);
  }
}
